// 员工绩效内容组件
Vue.component('employee-performance-content', {
  data() {
    return {
      // 绩效数据
      month: '',
      lastScore: 0,
      lastComment: '',
      records: [],
      totalRecords: 0,
      currentPage: 1,
      pageSize: 10,
      selectedYear: new Date().getFullYear(),
      loading: false
    };
  },
  mounted() {
    // 组件挂载后获取绩效数据
    this.fetchPerformanceData();
  },
  template: `
    <div style="padding: 32px; width: 100%; box-sizing: border-box;">
      <el-card shadow="hover" style="width: 100%;">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;">
          <span style="font-size: 22px; font-weight: bold;">{{selectedYear}}年绩效概览</span>
          <div>
            <el-select v-model="selectedYear" placeholder="选择年份" style="width: 100px;" @change="handleFilter">
              <el-option v-for="y in yearOptions" :key="y" :label="y+'年'" :value="y"></el-option>
            </el-select>
          </div>
        </div>
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="12">
            <el-statistic title="本期绩效分" :value="lastScore" suffix="分"></el-statistic>
          </el-col>
          <el-col :span="12">
            <el-card shadow="never" style="background:#f8f8f8;">
              <div style="font-size: 15px; color:#666;">评语：{{lastComment}}</div>
            </el-card>
          </el-col>
        </el-row>
        <el-table :data="records" style="width: 100%;" v-loading="loading">
          <el-table-column prop="period" label="评估周期" width="120"></el-table-column>
          <el-table-column prop="score" label="分数" width="80"></el-table-column>
          <el-table-column prop="comment" label="评语"></el-table-column>
          <el-table-column prop="evaluator" label="评估人" width="100"></el-table-column>
        </el-table>
        <div style="margin: 18px 0 0; text-align: right;">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="totalRecords"
            :page-size="pageSize"
            :current-page.sync="currentPage"
            @current-change="handlePageChange"
          ></el-pagination>
        </div>
      </el-card>
    </div>
  `,
  computed: {
    yearOptions() {
      const now = new Date().getFullYear();
      return [now - 2, now - 1, now];
    },

  },
  methods: {
    // 获取绩效数据
    async fetchPerformanceData() {
      this.loading = true;
      try {
        const params = {
          page: this.currentPage,
          per_page: this.pageSize,
          year: this.selectedYear
        };
        
        const response = await performanceAPI.getPerformances(params);
        const data = response.data;
        
        // 转换API返回的数据为组件需要的格式
        this.records = data.performances.map(item => ({
          period: item.period,
          score: item.score,
          comment: item.comments || '',
          evaluator: item.evaluator_name || '未知'
        }));
        
        // 更新分页信息
        this.totalRecords = data.pagination?.total || 0;
        this.currentPage = data.pagination?.page || 1;
        
        // 设置最新绩效信息
        if (this.records.length > 0) {
          const latestRecord = this.records[0];
          this.lastScore = latestRecord.score;
          this.lastComment = latestRecord.comment;
          this.month = latestRecord.period;
        } else if (data.current_period_performance) {
          // 如果没有历史记录但有当前季度绩效，使用当前季度数据
          this.lastScore = data.current_period_performance.score;
          this.lastComment = data.current_period_performance.comments;
          this.month = data.current_period_performance.period;
        }
        
      } catch (error) {
        console.error('获取绩效数据错误:', error);
        this.$message.error(error.response?.data?.msg || error.message || '获取绩效数据失败');
      } finally {
        this.loading = false;
      }
    },
    
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchPerformanceData();
    },
    
    handleFilter() {
      this.currentPage = 1;
      this.fetchPerformanceData();
    }
  }
});
